Weave design-system-native canvas

Bring your design system to life.

Weave turns your own tokens and components into real, production-ready React — on-brand, high-craft, nothing lost in translation.

Paste your tokens

Tailwind config or CSS variables. Weave parses, contrast-checks, and re-themes the base kit — no hard stops.

PARSE

CONTRAST — TOKEN PAIRS

Start with five tokens

The essentials, set over the base kit. Everything stays a token — swap in the real file any time.

BRAND COLOR

NEUTRALS

CORNER RADIUS

TYPE

SPACING SCALE

NEW

you@company.com

Get started

Docs

live preview — your tokens over the base kit

Here's the base kit — in Weave gray.

Your system is live.

Get started

Secondary

NEW

Filter · 3

you@company.com

Maya Kade Product designer

Overview Members Billing

Notifications

volume — 62

Ag {{ revealFontNote }}

⌘K anywhere · ✦ to compose

◆

Solstice — Marketing site solstice system · autosaved

BASE KIT — MAPPED TO YOUR CODE

PATTERNS — YOURS

▦ {{ item.name }}

Save a selection as a pattern — it lives here, in your system.

CUSTOM — YOUR CODE

◈

COLOR — BRAND

edits ripple across canvas + code

COLOR — NEUTRAL

TYPE

NEUTRALS

RADIUS

radius-md {{ radiusChip }}

SPACING

4 · 8 · 12 · 16 · 24 · 32 · 48

HISTORY — EVERY CHANGE, LABELLED

No steps yet — every edit lands here with a label. Click one to travel back.

ISOLATION {{ isoName }} {{ isoMap }} real runtime · variants × states

scroll — pan · ⌘ scroll — zoom · drag board — pan

✦ COMPOSE — CONSTRAINED TO YOUR SYSTEM

✦ Describe a section — Weave composes it from your mapped components and tokens only.

◎ pick — scope an edit to one element
✎ draw — scribble a note on the board

▧ {{ att.name }}

staged as a ghost — nothing applied

composing from your system…

✦

▧ {{ att.name }}

⏎ send · esc dismiss

Select a component on the canvas.

click — select · drag — move
⌘K — commands · ✦ — compose
⌘Z — undo · ⌫ — delete

FRAME

width

CONTENT

VARIANT

SIZE

WEIGHT

TONE

LAYOUT

gap

padding

TOKENS BOUND

✧ Critique this screen against your craft standard. Spacing, hierarchy, contrast, alignment, states — every fix lands in your tokens and components, with the why. standard: Impeccable

Scanning spacing, hierarchy, contrast…

✦ Impeccable. Nothing to fix. Every check passed against your standard.

{{ codeDraftEl }}

            prettier ✓tsc --noEmit ✓imports @solstice/ui
          

Weave

Sign in.

Your system is waiting — everything you compose exports as real React.

design-partner MVP — accounts are provisioned manually

Weave

Projects

Design systems

Solstice {{ homeSysMeta }}

Settings

DESIGN SYSTEM

Solstice {{ setSysMeta }}

contrast — 3 pairs checked · brand body text passes AA at brand-700

COMPONENT MAPPINGS — THE MERGE BAR

unmapped components fall back to the Weave base kit at export — the warning follows them

CRAFT STANDARD — POLISH RULESET

EXPORT DEFAULTS

PLAN — DESIGN PARTNER

$0 during the MVP billing starts at GA · seats 2 of 5 used · no card on file

Profile

Maya Kade maya@solstice.team · Product designer

DESIGN PARTNER

PREFERENCES

App theme

WORKSPACE — SOLSTICE

KEYBOARD

              ⌘K — commands · ✦ — compose · ⌘Z — undo
              ⌘0 — zoom to fit · ⌘1 — 100% · scroll — pan · ⌘scroll — zoom
              ⌫ — delete selection · esc — dismiss anything
            

System update re-import tokens · diff · apply with undo

Devon updated the tokens. Paste the new file — Weave diffs it against the live system and shows the impact before anything changes.

{{ item.tag }} {{ item.tok }} {{ item.from }} → {{ item.to }}

i {{ sysImpact }}

✓ System updated. radius-md 12 → 10 rippled across every bound component on the canvas and in the code. Bindings preserved — nothing broke silently.

preview — real components, real states

{{ exportTitle }} PRODUCTION-GRADE

Real components, real tokens — nothing inlined, nothing to translate.

! Badge isn't mapped to your library — export falls back to the Weave default for it.

Ready to ship.

npm i && npm run dev

              · {{ exportImportsLine }}
              · tokens as CSS variables — tokens.css
              · deterministic — same tree, same code
            

⌘

⏎ run · ↑↓ navigate · esc close · ✦ routes to compose